<template>
  <div class="user-management-container">
    <div class="page-header">
      <span class="page-title">举报管理</span>
    </div>

    <!-- 用户搜索卡片 -->
    <el-card class="search-card">
      <el-form :inline="true" class="search-form">
        <el-form-item label="昵称搜索">
          <el-input placeholder="请输入昵称" v-model="searchReportForm.nickname" @keydown.enter="loadReport()"></el-input>
        </el-form-item>
        <el-form-item label="举报类型搜索">
          <el-input placeholder="请输入举报类型" v-model="searchReportForm.reportType" @keydown.enter="loadReport()"></el-input>
        </el-form-item>
        <el-form-item label="处理情况">
          <el-select placeholder="请选择" v-model="searchReportForm.status" @change="loadReport()">
            <el-option label="待处理" value="pending"></el-option>
            <el-option label="已处理" value="processed"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="reset()">重置</el-button>
          <el-button type="primary" @click="loadReport()">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 用户列表卡片 用户表格数据-->
    <el-card class="table-card">
      <div class="report-cards">
        <el-card v-for="report in reportArr" :key="report.reportId" class="report-card">
          <div class="report-header">
            <span class="report-id">举报单号: {{ report.reportId }}</span>
            <el-tag :type="report.status === 'pending' ? 'warning' : 'success'" class="status-tag">
              {{ formatStatus(report.status) }}
            </el-tag>
          </div>

          <div class="report-content">
            <div class="report-item">
              <label>昵称:</label>
              <span>{{ report.nickname || '无' }}</span>
            </div>

            <div class="report-item">
              <label>举报类型:</label>
              <span>{{ report.reportType || '无' }}</span>
            </div>

            <div class="report-item">
              <label>举报内容:</label>
              <span>{{ report.reason || '无' }}</span>
            </div>

            <div class="report-item">
              <label>举报时间:</label>
              <span>{{ formatDate(report.createdAt) }}</span>
            </div>
          </div>

          <div class="report-footer">
            <el-button type="primary" link @click="editReport(report)">
              查看详情
            </el-button>
          </div>
        </el-card>

        <!-- 当没有数据时显示 -->
        <div v-if="reportArr.length === 0 && !loading" class="no-data">
          <el-empty description="暂无数据" />
        </div>
      </div>

      <!-- 分页组件 -->
      <el-pagination
          v-show="reportArr.length > 0"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchReportForm.pageNum"
          :page-sizes="[4, 8, 10, 20]"
          :page-size="searchReportForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          class="pagination"
      />
    </el-card>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import axios from "axios";
import router from "@/router";

const reportArr = ref([]);
const total = ref(0);
const loading = ref(false);

const searchReportForm = ref({
  nickname: '',
  reportType: '',
  status: '',
  pageNum: 1,
  pageSize: 10
});

const loadReport = () => {
  loading.value = true;
  axios.get(BASE_URL + `/api/reports/select`, {params: searchReportForm.value})
      .then((response) => {
        if(response.data.state === 2001){
          reportArr.value = response.data.data.list || [];
          total.value = response.data.data.totalPage || 0;
          console.log('Report data:', reportArr.value);
        }else {
          ElMessage.error(response.data.message || '查询失败');
        }
      })
      .catch((error) => {
        ElMessage.error('查询出错: ' + error.message);
      })
      .finally(() => {
        loading.value = false;
      });
};

const reset = () => {
  searchReportForm.value = {
    nickname: '',
    reportType: '',
    status: '',
    pageNum: 1,
    pageSize: 10
  };
  loadReport();
}

const editReport = (report) => {
  router.push({
    name: 'reportUpdate',
    query: {
      reportId: report.reportId,
      reporterId: report.reporterId,
      nickname: report.nickname,
      reportType: report.reportType,
      reason: report.reason,
      createdAt: report.createdAt,
    }
  });
};

// 处理每页显示条数变化
const handleSizeChange = (pageSize) => {
  searchReportForm.value.pageSize = pageSize;
  searchReportForm.value.pageNum = 1; // 重置到第一页
  loadReport();
};

// 处理页码变化
const handleCurrentChange = (pageNum) => {
  searchReportForm.value.pageNum = pageNum;
  loadReport();
};

// 格式化状态显示
const formatStatus = (status) => {
  const statusMap = {
    'pending': '待处理',
    'processed': '已处理'
  };
  return statusMap[status] || status;
};

// 格式化日期显示
const formatDate = (date) => {
  if (!date) return '无';
  return new Date(date).toLocaleString('zh-CN');
};

onMounted(() => {
  loadReport();
});

</script>

<style scoped>
.user-management-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 16px 24px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.page-title {
  font-size: 22px;
  font-weight: 600;
  color: #303133;
}

.search-card {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.search-form :deep(.el-form-item) {
  margin-bottom: 0;
}

.search-form :deep(.el-form-item__label) {
  font-weight: 500;
  margin-right: 8px;
}

.table-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.report-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
  padding: 20px 0;
}

.report-card {
  border: 1px solid #ebeef5;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.report-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.report-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #ebeef5;
}

.report-id {
  font-weight: 600;
  color: #303133;
}

.status-tag {
  font-size: 12px;
}

.report-content {
  padding: 15px 20px;
}

.report-item {
  display: flex;
  margin-bottom: 12px;
}

.report-item:last-child {
  margin-bottom: 0;
}

.report-item label {
  width: 80px;
  font-weight: 500;
  color: #606266;
}

.report-item span {
  flex: 1;
  color: #303133;
  word-break: break-all;
}

.report-footer {
  padding: 15px 20px;
  border-top: 1px solid #ebeef5;
  text-align: right;
}

.no-data {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 0;
  color: #909399;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-start; /* 改为靠左对齐 */
}

:deep(.el-card__body) {
  padding: 20px;
}

:deep(.el-input__inner) {
  border-radius: 6px;
}

:deep(.el-button) {
  border-radius: 6px;
  transition: all 0.3s ease;
}

:deep(.el-button:hover) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
</style>
